<template>
  <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" title="显示字段编辑" @close="dialogVisible=false">
    <el-form ref="forbidForm" :rules="rules" :model="formData" label-width="120px">
      <el-form-item label="字段名" prop="fieldName">
        <el-input
          v-model="formData.fieldName"
          placeholder="输入字段名"
        ></el-input>
      </el-form-item>
      <el-form-item label="字段描述" prop="desc">
        <el-input
          v-model="formData.desc"
          placeholder="字段描述会在使用字段的地方展示"
        ></el-input>
      </el-form-item>
      <el-form-item label="依赖基础字段" prop="relyOn">
        <span v-for="(item, i) in formData.relyOn" :key="i">
          <span>{{ item.desc || item.fieldName }}</span>
          <el-button
            type="text"
            @click="removeRelyOn(item)"
          >删除</el-button>
          <br>
        </span>
        <el-select
          v-model="relyOnToAdd"
          filterable
          placeholder="选择字段"
        >
          <el-option v-for="(item,i) in atomFields" :key="i" :label="item.desc || item.fieldName" :value="item.id"></el-option>
        </el-select>
        <el-button
          type="primary"
          @click="addRelyOn"
        >添加</el-button>
      </el-form-item>
      <el-form-item label="说明:">
        <ul>
          <li>查询使用的是mysql， 可以正常使用各种mysql的聚合函数, 常用的: sum(xxx), min(xxx), max(xxx)</li>
          <li>最终做查询的时候，会将任务中所有的显示字段的查询语句拼接起来，同时使用任务中定义的筛选器做group by</li>
          <li>例如定义一个任务, 其筛选器是 渠道(channel), 版本(version), 显示字段是 注册人数(register_count), 最终的查询语句是: </li>
          <li>select sum(register_count) as register_count from job_xx group by channel, version where channel='xx' and version='xx'</li>
        </ul>
      </el-form-item>
      <el-form-item label="可用查询字段:">
        <ul>
          <li v-for="(item, i) in formData.relyOn" :key="i">{{ item.desc + ":" + item.fieldName }}</li>
        </ul>
      </el-form-item>
      <el-form-item label="查询语句" prop="query">
        <el-input
          v-model="formData.query"
          placeholder="mysql查询语句, 使用$job_name用于指代查询的表"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="onOK">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { atomFieldList } from '@api/bx';
export default {
  name: 'DisplayFieldEditor',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      formData: this.value,
      rules: {
        fieldName: [{ required: true, message: '不能为空' }],
        desc: [{ required: true, message: '不能为空' }],
        // relyOn: [{ required: true, message: '不能为空' }],
        query: [{ required: true, message: '不能为空' }]
      },
      atomFields: [],
      atomFieldMap: {},
      relyOnToAdd: null
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      }
    }
  },

  watch: {
    visible(val) {
      if (val) {
        this.formData = this.value
      }
    }
  },
  created() {
    this.getAtomFields()
  },
  methods: {
    getAtomFields() {
      atomFieldList().then(resp => {
        this.atomFields = resp.data.list
        const idMap = {}
        this.atomFields.forEach(item => {
          idMap[item.id] = item
        })
        this.atomFieldMap = idMap
      })
    },
    addRelyOn() {
      if (!this.relyOnToAdd) {
        this.$message.error('请选择字段')
        return
      }
      const item = this.atomFieldMap[this.relyOnToAdd]
      console.log('add rely on: ', item, this.relyOnToAdd)
      if (item) {
        let found = false
        this.formData.relyOn.forEach(i => {
          if (i.id === item.id) {
            found = true
          }
        })
        if (!found) {
          this.formData.relyOn.push(item)
          this.formData.relyOn = Object.assign([], this.formData.relyOn)
        }
      }
      this.relyOnToAdd = null
    },
    removeRelyOn(item) {
      this.formData.relyOn.forEach((obj, index, self) => {
        if (obj === item) {
          self.splice(index, 1)
        }
      })
    },
    onOK() {
      this.$refs.forbidForm.validate(valid => {
        if (valid) {
          this.$emit('success', this.formData)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
